<template>
  <div class="cate">
    <van-tree-select
      v-model:main-active-index="activeIndex"
      height="100%"
      :items="cates"
    >
      <template #content>
        <!-- 内容 -->
        <!-- 
            组件
              初始化阶段，刚发了请求   cates 是 []
              更新阶段  cates才有值
           -->
        <div class="cate-content">
          <div v-if="cates.length">
            <div
              class="floors"
              v-for="(v, i) in cates[activeIndex].floors"
              :key="i"
            >
              <h3>{{ v.name }}</h3>
              <van-grid :column-num="3" icon-size="40">
                <van-grid-item
                  v-for="e in v.list"
                  :key="e.api_cid"
                  :icon="e.img"
                  :text="e.name"
                  :to="{
                    name: 'list',
                    params: {
                      cid: e.api_cid,
                    },
                    query: {
                      r: 'class/cyajaxsub',
                    },
                  }"
                />
              </van-grid>
            </div>
          </div>
        </div>
      </template>
    </van-tree-select>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, onMounted } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const store = useStore();
    const activeIndex = ref(0);
    const cates = computed(() => store.state.list.cates);
    onMounted(() => {
      store.dispatch({
        type: "list/getCates",
      });
    });
    return {
      cates,
      activeIndex,
      items: [{ text: "分组 1" }, { text: "分组 2" }],
    };
  },
});
</script>

<style lang="stylus" scoped>
.cate
    height 100%
    /deep/ .van-tree-select__nav
        flex .7
    /deep/ .van-sidebar-item--select::before
        width .02rem
        height 100%
        background-color #FC3F78
    /deep/ .van-sidebar-item--select
        color #FC3F78
    .cate-content
      padding 0 .08rem
</style>
